<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=640,maximum-scale=1.0, user-scalable=no">
		<title>我的产品-制作海报</title>
		<link rel="stylesheet" href="css/cropper.css" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript">
	   		var config  ={};
		    (function(){
		      var config_width = 640,
		        config_height = 0,
		        html = document.documentElement,
		        delay, setSize = function() {
		          config.windowWidth = html.clientWidth || window.innerWidth || html.getBoundingClientRect().width;
		          config.windowHeight = html.clientHeight || window.innerHeight || html.getBoundingClientRect().height;
		          config.aspectRatio = config.windowWidth / config.windowHeight;
		    
		          if (!config_width || config.aspectRatio > config_width / config_height) {
		            config.windowScale = config_height / config.windowHeight;
		            html.style.cssText += 'font-size:' + config.windowHeight * 100 / config_height + 'px!important;';
		          } else {
		            config.windowScale = config_width / config.windowWidth;
		            html.style.cssText += 'font-size:' + config.windowWidth * 100 / config_width + 'px!important;';
		          }
		          html.offsetWidth;
		        }
		      if (!config_height && !config_width) {
		        config_width = 640;
		      }
		      setSize();
		      document.addEventListener('DOMContentLoaded', function() {
		        window.addEventListener('resize', function() {
		          clearTimeout(delay);
		          delay = setTimeout(setSize, 50);
		        }, false);
		      }, false);
		    })();
		    
		    
		    //获取cookie 二维码url
			if(!getUrlParam('id')){
				location.href = 'http://m2.t1.laisj.com/publics/home/index';
			}
		    function getUrlParam(name){
				var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");  //构造一个含有目标参数的正则表达式对象
				var r = window.location.search.substr(1).match(reg);   //匹配目标参数
				//返回参数值
				if (r!=null){
					return unescape(r[2]);
				}else{
					return false;      
				}  
			}
	   	</script>
	</head>
	<body>
	<div id="web">
		<!--引导页-->
		<div class="loadpage">
			<div class="logo"></div>
			<div class="center">
				<div class="title animated fadeInLeft"></div>
				<div class="t-text animated fadeInRight"></div>
			</div>
			<div class="load-btn animated bounceInUp">
				<div class="clearfix">
					<div class="btn-text fl"></div>
					<div class="btn-right first fl"></div>
					<div class="btn-right second fl"></div>
				</div>
			</div>
		</div>
		<div class="page">
			<!--语言选择栏-->
			<div class="language-select clearfix">
				<div class="chinese active">中文海报</div>
				<div class="english">English Poster</div>
			</div>
			<!--中文视图-->
			<div class="chinese-view">
				<!--广告-->
				<div class="advertis"></div>
				<!--填写内容区域-->
				<div class="content">
					<form>
						<div class="content-top">
							<!--用户姓名、次数-->
							<div class="user-info">
								<label>这是</label>
								<input class="" type="text" id="user-name" maxlength="20" value="" placeholder="姓名"/>
								<label>第</label>
								<input type="number" id="user-num" value="" max="999" placeholder="次数"/>
								<label>次广交会之行</label>
							</div>
							<!--产品名称-->
							<div class="user-product">
								<label>这次！我带着爆款产品</label>
								<input type="text" name="" id="" value="" maxlength="30" placeholder="产品名称"/>
							</div>
						</div>
						<div class="content-img">
							<div class="img-wrap">
								<div class="upload">
									<img src="img/upload.png"/>
									<p>上传产品图片</p>
								</div>
								<img id="pro-img" class="product-img" src=""/>
							</div>
							<input type="file" accept="image/*" style="display: none;"/>
						</div>
						<div class="content-bottom">
							<div class="company-name">
								<label>公司名称</label>
								<input type="text" id="company-name" value="" maxlength="30" placeholder="请输入公司名称" />
							</div>
							<div class="company-phone">
								<label>联系方式</label>
								<input type="tel" id="company-phone" value=""   placeholder="请输入手机号码" />
							</div>
							<div class="company-booth">
								<label>展位信息</label>
								<input type="text" id="company-booth" value="" maxlength="30" placeholder="请输入展位信息" />
							</div>
							<div class="submit-btn">生成属于您的广交会海报</div>
						</div>
						<input type="reset" value="" style="display: none;" />
					</form>
				</div>
			</div>
			<!--英文视图-->
			<div class="english-view">
				<!--广告-->
				<div class="advertis"></div>
				<!--填写内容区域-->
				<div class="content">
					<form>
						<div class="content-top">
							<!--用户姓名、次数-->
							<div class="user-info">
								<label>This is</label>
								<input class="" type="text" id="user-name" value="" placeholder="name"/>
								<label>‘s</label>
								<input type="text" id="user-num" value=""  placeholder="frequency"/>
							</div>
							<p>time to Canton Fair</p>
							<p>Here is extreme hot product</p>
							<!--产品名称-->
							<div class="user-product">
								<label>named</label>
								<input type="text" name="" id="" value=""  placeholder="product name"/>
							</div>
						</div>
						<div class="content-img">
							<div class="img-wrap">
								<div class="upload">
									<img src="img/upload.png"/>
									<p>the picture uploaded</p>
								</div>
								<img id="pro-img" class="product-img" src=""/>
							</div>
							<input type="file" accept="image/*" style="display: none;"/>
						</div>
						<div class="content-bottom">
							<div class="company-name">
								<input type="text" id="company-name" value="" placeholder="Company Name" />
							</div>
							<div class="company-phone">
								<input type="tel" id="company-phone" value=""  placeholder="Contact" />
							</div>
							<div class="company-booth">
								<input type="text" id="company-booth" value="" placeholder="Booth Information" />
							</div>
							<div class="submit-btn">Create a poster</div>
						</div>
						<input type="reset" value="" style="display: none;" />
					</form>
				</div>
			</div>
		</div>
		<!--裁剪页面-->
		<div class="container tailor-view">
			<div class="avatrwrap"><img id="image" src=""/></div>
			<div id="crop">确定</div>
		</div>
		<!--提示弹窗-->
		<div class="alert-view">
			<div class="alert">
				<p>您还有重要信息没填</p>
				<div>确定</div>
			</div>
		</div>
		<canvas id="canvas" style="display: none;"></canvas>
		<div id="qrcode"  style="display: none;"></div>
	</div>
	</body>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="js/common.js" ></script>
	<script type="text/javascript" src="js/cropper.min.js" ></script>
	<script type="text/javascript" src="js/jquery.qrcode.min.js" ></script>
	<script type="text/javascript" src="js/index.js" ></script>
</html>
